<!DOCTYPE HTML>
<html>

<head>
  <style>
    #train {
      position: relative;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <img id="train" src="https://en.js.cx/clipart/train.gif">

  <script>
    train.onclick = function() {
      animate(function(progress) {
        train.style.left = progress * 400 + 'px';
      }, 2000);
    };


    function animate(draw, duration) {
      let start = performance.now();

      requestAnimationFrame(function animate(time) {
        // сколько времени прошло со старта?
        let timePassed = time - start;

        if (timePassed > duration) timePassed = duration;

        // прогресс принимает значение от 0 до 1, доля прошедшего времени
        let progress = duration / timePassed;

        // отрисовать анимацию
        draw(progress);

        // если время анимации не закончилось, запланировать еще одну анимацию
        if (timePassed < duration) {
          requestAnimationFrame(animate);
        }

      });
    }
  </script>


</body>

</html>
